<template>
  <div id="playlist" v-infinite-scroll="updataplaylist()">
   <div id="songlistinfo">
     <div class="songimg"><img :src="songlistinfo.playlist.coverImgUrl" alt=""></div>
     <div class="setinfo">
       <div class="setname"><h1>{{songlistinfo.playlist.name}}</h1></div>
       <div class="songlistcreator">
         <img :src="songlistinfo.playlist.creator.avatarUrl" alt="">
         <span class="songlistcreatorname">{{songlistinfo.playlist.creator.nickname}}</span>
         <span class="songlisttag" v-for="item,index in songlistinfo.playlist.tags" :key="index">#{{item}}</span>
       </div>
       <div class="songlistintro">{{songlistinfo.playlist.description}}</div>
       <div class="songlistbtn">
         <el-button icon="el-icon-video-play" round size="small" type="success" @click="playAll()">播放全部</el-button>
         <el-button icon="el-icon-star-off" round size="small" type="info">收藏</el-button>
       </div>
     </div>
   </div>
   <div class="songlisttagbar">
     <nav class="btn-switchover">
       <ul>
         <!-- 优化：1.点击歌曲，评论，详情等，使用数字代替 -->
         <li @click="btngetsonglist">歌曲</li>
         <li @click="btngetcomment">评论</li>
       </ul>
     </nav>
     <Songlist v-if="Btn_Switchover_state == true" :tracks="songlisttracks" :trackIds="songtrackIds"></Songlist>
     <SongComment v-else-if="Btn_Switchover_state == false"></SongComment>
   </div>
  </div>
</template>

<script>
import Songlist from '../playlist/SongLits.vue'
import SongComment from '../playlist/SongComment.vue'
import {getsonglist} from '../../network/songlist'

export default {
  name: 'PlayList',
  data() {
    return {
      Btn_Switchover_state:true, //歌曲评论按钮切换状态
      songlistinfo:null,   //歌单详情信息
      songlisttracks:null,
      songtrackIds:[]
    }
  },
  components: {
    Songlist,
    SongComment
  },
  methods: {
    btngetsonglist() {
      this.Btn_Switchover_state = true
      console.log(this.songlistinfo);
    },
    btngetcomment() {
      this.Btn_Switchover_state = false
    },
    wacthplaylist() {
      //获取歌单详情
    getsonglist(this.$route.query.id).then(res => {
      this.songlistinfo = res.data
      this.songlisttracks = res.data.playlist.tracks
    })
    },
    //滚动更新歌单数据
    updataplaylist() {
      console.log("PlayList：滚动更新歌单数据");
    },
    playAll() {
      this.$store.commit("PLAYALL",this.songlisttracks)
    }
  },

  activated() {
    //console.log(this.$route);
  },
  created() {
    //获取歌单详情
    getsonglist(this.$route.query.id).then(res => {
      this.songlistinfo = res.data
      this.songlisttracks = res.data.playlist.tracks
      this.songtrackIds = res.data.playlist.trackIds
    })
    //console.log(this.$route.query.id);
  },

  watch: {

    //监听路由id进行数据跟新
    '$route.query.id': {
      deep:true,
      handler() {
        this.wacthplaylist()

      }
    }
  }
}
</script>

<style>
#playlist {
  margin: 0 0 0 1rem;
  width: 64vw;
  height: 60vh;
  overflow:auto;

}
#songlistinfo {
  width: 62vw;
  height: 20vh;

  padding: 1rem 0 0 0;
  display: flex;
}
.songimg {
  width: 9vw;
  height: 19vh;

}
.songimg img{
  width: 9vw;
  height: 18vh;
  border-radius: 15px;
}
.setinfo {
  width: 60vw;
  height: 17vh;

  margin: 0 0 0 1rem;
}
.setname h1 {
  margin: 0 0;
}
.songlistcreator img{
  width: 1.5vw;
  border-radius: 50%;
  display: inline;
  vertical-align: middle;
  margin: 0.6rem 0;
}
.songlistcreatorname {
  margin: 0 1rem 0 0.5rem;
  color: rgb(123, 123, 23);
}
.songlistbtn {
  margin: 1rem 0 0 0;
}
.songlisttag{
  margin: 0 1rem 0 0;
  color: rgb(103, 123, 103);
}
/*不设高度，随内容撑高度*/
.songlisttagbar {
  width: 62vw;
}

.btn-switchover {
  width: 62vw;
  height: 5vh;
}
.btn-switchover ul {
  padding: 0;
  margin: 0;
  display: flex;
}
.btn-switchover ul li {
  list-style: none;
  padding: 0 0 1vh 0;
  margin: 0 2vw 0 0;
}
.btn-switchover ul li:hover{
  cursor: pointer;
}
.songlistintro {
  height: 2rem;
  overflow: auto;
  color:darkolivegreen;
}
</style>